<template>
  <div class="stock-account self-details" :id="idName">
    <account-toggle :title="'股票账户'" :parentId="idName" color1="RGBA(124,15,15,0.3)" color2="#EC4F4F"  @toggleFunc="toggleFunc">
    </account-toggle>
    <stock-account-over :userCode="userCode"></stock-account-over>
    <transition name="slide-fade">
      <div class="stock-account-conetnt"  v-show="isShow" >
        <my-stock :userCode="userCode"></my-stock>
        <my-group :userCode="userCode"></my-group>
      </div>
    </transition>
    <div class="bottom-blank" :class="{'account-close':!isShow}"></div>
  </div>
</template>

<script>
  import AccountToggle from 'components/selfaccount/AccountToggle'
  import StockAccountOver from 'components/selfaccount/StockAccountOver'
  import MyStock from 'components/selfaccount//MyStock'
  import MyGroup from 'components/selfaccount//MyGroup'

  export default {
    data () {
      return {
        isShow:false,
        idName:'stockAccount'
      }
    },
    props:{
      userCode:{
        type:String
      }
    },
    components: {
      'stock-account-over':StockAccountOver,
      'my-stock':MyStock,
      'my-group':MyGroup,
      'account-toggle':AccountToggle
    },
    methods:{
      toggleFunc(isShow){
        this.isShow = isShow
      }
    }
  }
</script>

<style scoped>
  .slide-fade-enter-active,.slide-fade-leave-active{
    transition: all 0.3s ease;
  }
  .slide-fade-enter, .slide-fade-leave-active {
    transform: translate(0,-25%);
    opacity: 0;
  }

  .stock-account{
    position: relative;
  }
  .stock-account-conetnt{
    z-index: 996;
    position: relative;
  }
  .bottom-blank{
    width:100%;
    height: 40px;
    background: #EC4F4F;
    z-index: 998;
    position: relative;
  }
  .account-close{
    margin-bottom: 4px;
  }
</style>
